<template>
  <view class="pin-check-box-container" :class="{ 'is-half': isHalf, 'is-full': isFull }" @tap="check"></view>
</template>

<script setup lang="ts">

const props = defineProps<{
  color: string
  width: number | string
  isHalf: boolean
  isFull: boolean
}>()

const emits = defineEmits(["onCheck"])

const check = () => {
  emits("onCheck")
}

</script>

<style lang="scss" scoped>
.pin-check-box-container {
  width: 24px;
  height: 24px;
  border: 1px solid $uni-border-color;
  border-radius: 2px;
  position: relative;
  margin-right: 4px;
}

.is-half {
  background-color: #f0ad4e;
  border: 1px solid #f0ad4e;

  &::after {
    content: '';
    position: absolute;
    left: calc(50% - 8px);
    top: calc(50% - 1px);
    width: 16px;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
  }
}

.is-full {
  background-color: #f0ad4e;
  border: 1px solid #f0ad4e;

  &::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 4px;
    height: 12px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
  }
}
</style>
